<script setup lang="ts">
import {
  addDataField,
  deleteDataField,
  editDataField,
  getDataFieldDetail,
  getDataFieldPageList
} from '@/apis/callTaskConfigure/dataField'
import {useFetchList} from "@/hooks/table/useFetchList";
import {DeleteOutlined, FormOutlined, PlusOutlined} from '@ant-design/icons-vue'
import {message} from "ant-design-vue";
import {columns} from "@/views/callTaskConfigure/DataField/consts/tableColumns";
import BaseQuery from "@/components/BaseQuery/index.vue";
import {queryOptions} from "@/views/callTaskConfigure/DataField/consts/queryOptions";

const drawTitle = ref<string>('新增字段')
const open = ref<boolean>(false)
const formRef = ref()
const query = reactive({
  fieldName: '',
  fieldType: undefined,
  required: undefined,
})
const {tableData, handleSearch, handleTableChange, pagination, loading, initTable} = useFetchList(
    getDataFieldPageList,
    query
)
onMounted(() => {
  handleSearch()
})

let formState = reactive({
  fieldName: '',
  fieldType: '0',
  required: '0',
  fieldLength: '',
  id: ''
})

const rules = reactive({
  fieldName: [{required: true, message: '请输入字段名称', trigger: 'blur'}],
  fieldType: [{required: true, message: '请选择字段类型', trigger: 'blur'}],
  required: [{required: true, message: '请选择是否必填', trigger: 'blur'}],
})

const handleAdd = () => {
  drawTitle.value = '新增字段'
  formState = reactive({
    fieldName: '',
    fieldType: '0',
    required: '0',
    fieldLength: '',
    id: ''
  })
  open.value = true
}
const handleDelete = async (id: any) => {
  const res = await deleteDataField({id: id})
  if (res.code === 200) {
    message.success('删除成功')
    handleSearch()
    return
  }
  message.error('删除失败')
}
const handleEdit = async (record: any) => {
  const res = await getDataFieldDetail({id: record.id})
  if (res.code === 200) {
    drawTitle.value = '编辑字段'
    formState = reactive({...res.data})
    formState.fieldType = res.data.fieldType + ''
    formState.required = res.data.required + ''
    open.value = true
    return
  }
}

const handleSubmit = () => {
  formRef.value
      .validate()
      .then(async () => {
        const fn = formState.id ? editDataField : addDataField
        const res = await fn({
          ...formState
        })
        if (res.code === 200) {
          message.success('操作成功！')
          closeDrawer()
          formState.id ? handleSearch() : initTable()
          return
        }
        message.error('操作失败！')
      })
      .cache((error: any) => {
        console.log('error',error)
      })
}
const closeDrawer = () => {
  open.value = false
  formRef.value.resetFields()
  formState = reactive({
    fieldName: '',
    fieldType: '0',
    required: '0',
    fieldLength: '',
    id: ''
  })
}

</script>

<template>
  <div class="base-table-container">
    <BaseQuery :query-options="queryOptions" :query="query" class="mb8" @search="handleSearch" />
    <a-button class="mb8 fr" @click="handleAdd">
      <PlusOutlined/>
      新增
    </a-button>
    <a-table
        :columns="columns"
        :data-source="tableData"
        bordered
        :pagination="pagination"
        @change="handleTableChange"
        :loading="loading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operate'">
          <a-button @click="handleEdit(record)" type="link">
            <FormOutlined/>
            编辑
          </a-button>
          <a-button @click="handleDelete(record.id)" type="link">
            <DeleteOutlined/>
            删除
          </a-button>
        </template>
      </template>
    </a-table>
    <a-drawer
        v-model:open="open"
        class="custom-class"
        root-class-name="root-class-name"
        :title="drawTitle"
        placement="right"
        :closable="false"
        width="500"
    >
      <a-form
          ref="formRef"
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 15 }"
          autocomplete="off"
          :rules="rules"
      >
        <a-form-item label="字段名称" name="fieldName">
          <a-input v-model:value="formState.fieldName" placeholder="请输入字段名称"/>
        </a-form-item>
        <a-form-item label="字段类型" name="fieldType">
          <a-select v-model:value="formState.fieldType" placeholder="请选择字段类型">
            <a-select-option value="0">PHONE</a-select-option>
            <a-select-option value="1">STRING</a-select-option>
            <a-select-option value="2">LONG</a-select-option>
            <a-select-option value="3">FLOAT</a-select-option>
            <a-select-option value="4">INTEGER </a-select-option>
            <a-select-option value="5">BOOLEAN</a-select-option>
            <a-select-option value="6">EMAIL</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否必填" name="required">
          <a-select v-model:value="formState.required" placeholder="请选择是否必填">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="0">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="字段长度" name="fieldLength">
          <a-input-number v-model:value="formState.fieldLength" style="width: 120px"/>
        </a-form-item>
      </a-form>

      <template #footer>
        <a-button key="back" style="margin-right: 16px" @click="closeDrawer">取消</a-button>
        <a-button key="submit" type="primary" @click="handleSubmit">提交</a-button>
      </template>
    </a-drawer>
  </div>
</template>